<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>Home</title>
        <link href="favicon.ico" rel="shortcut icon">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body id="large-header">
        <canvas class="shave" id="demo-canvas"></canvas>
        <div id="contn">
            <v-header></v-header>
            <v-main :parent-nav="nav" :parent-currentind="currentind" :parent-blocks="blocks" :parent-news="news"></v-main>
            <v-footer></v-footer>
        </div>
        <template id="vMain">
            <main>
                <div class="heading">
                    <div class="storeBox" v-if="parentNav.length" v-html="parentNav[parentCurrentind].htmlContent"></div>
                    <div class="fluid flex flex-align-items fill">
                        <div class="txt ready">
                                <p class="delay-1" v-if="parentNav.length">{{parentNav[parentCurrentind].enName}}</p>
                                <p class="delay-2"></p>
                                <a href="science.html" class="more delay-3">Read More</a>
                        </div>
                    </div>
                    <p class="pic fill"><img v-if="parentNav.length" :src="parentNav[parentCurrentind].imagePath" class="obj-c" alt=""></p>
                </div>
                <div class="about">
                    <div class="storeBox" v-if="parentBlocks.length" v-html="parentBlocks[0].htmlContent"></div>
                    <p class="bg fill"></p>
                    <div class="fluid">
                        <div class="stand ready overHalf">
                                <p class="bg fill"></p>
                                <div class="inner flex flex-align-items">
                                    <div class="countries">
                                        <div class="mid">
                                            <p class="snp"><img src="img/index/singapore.png" alt=""></p>
                                            <p class="gmy"><img src="img/index/germany.png" alt=""></p>
                                            <p class="cn"><img src="img/index/china.png" alt=""></p>
                                        </div>
                                    </div>
                                    <!-- <img v-if="parentBlocks.length" :src="parentBlocks[0].imagePath" alt=""> -->
                                    <div class="t">
                                        <p class="ttl">SCG, stands for <span>S-Singapore</span>,  <br /><span>C-China</span>, <span>G-Germany.</span></p>
                                        <p v-if="parentBlocks.length">{{parentBlocks[0].description}}</p>
                                    </div>
                            </div>
                        </div>
                        <div class="txt">
                            <p class="ready"></p>
                            <p class="ready"></p>
                            <a href="about.html" class="more ready">About Us</a>
                        </div>
                    </div>
                </div>
                <div class="pipeline flex ready overHalf">
                        <p class="pic">
                            <img v-if="parentBlocks.length" :src="parentBlocks[1].imagePath" class="obj-c" alt="">
                        </p>
                        <div class="txt fillAft">
                            <p class="title" v-if="parentBlocks.length">{{parentBlocks[1].title}}</p>
                            <a href="science.html?pointId=pipeline" class="more">Read More</a>
                        </div>
                </div>
                <div class="news flex ready overHalf">
                    <p class="pic">
                        <img v-if="parentBlocks.length" :src="parentBlocks[2].imagePath" class="obj-c" alt="">
                    </p>
                    <div class="txt fillAft">
                        <p class="title" v-if="parentBlocks.length">{{parentBlocks[2].title}}</p>
                        <div class="list">
                            <a :href='"article.html?atclId=" + item.id' v-for="(item,i) in parentNews" class="itm">
                                    <p class="newsDate">{{item.date}}</p>
                                    <p class="newsTtl">{{item.title}}</p>
                            </a>
                        </div>
                    </div>
                </div>
            </main>
       </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            var contn = new Vue({
                el:'#contn',
                data:{
                    currentind:'',
                    nav:[],
                    blocks:[],
                    news:[]
                },
                methods:{
                    transDate:function(ary){
                        //console.log(ary.length);
                        for(var d = 0;d < ary.length;d++){
                                var date = ary[d].createTime.split(' ')[0].split('-');
                                var month = String(parseInt(date[1]));
                                var dateStr = date[2] + ' ';
                                switch(month){
                                    case '1':
                                        dateStr += 'January ';
                                        break;
                                    case '2':
                                        dateStr += 'Feburary ';
                                        break;
                                    case '3':
                                        dateStr += 'March ';
                                        break;
                                    case '4':
                                        dateStr += 'April ';
                                        break;
                                    case '5':
                                        dateStr += 'May ';
                                        break;
                                    case '6':
                                        dateStr += 'June ';
                                        break;
                                    case '7':
                                        dateStr += 'July ';
                                        break;
                                    case '8':
                                        dateStr += 'August ';
                                        break;
                                    case '9':
                                        dateStr += 'September ';
                                        break;
                                    case '10':
                                        dateStr += 'October ';
                                        break;
                                    case '11':
                                        dateStr += 'November ';
                                        break;
                                    case '12':
                                        dateStr += 'December ';
                                        break;
                                }
                                dateStr += date[0];
                                ary[d].date = dateStr;
                            }
                    },
                    writingWeb:function(){
                        //获取heading
                        axios.get(dataUrl + 'api/getNavbar',{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.nav = res.data.data;
                            for(var a = 0;a < res.data.data.length;a++){
                                if(window.location.href.indexOf('html') < 0){
                                    this.currentind = 0;
                                }else if(window.location.href.indexOf(res.data.data[a].visitUrl) >= 0){
                                    this.currentind = a;
                                }
                            }
                            setTimeout(function(){
                                $('main .heading .fluid .txt p:eq(1)').text($('main .heading .storeBox p:eq(0)').text());
                                $('main .tips p').text($('main .heading .storeBox p:eq(1)').text());
                            },)
                        });

                        //获取首页四大块栏目
                        axios.post(dataUrl + 'api/getArchivesDetails',{ext06:0,id:72,size:10000,page:1},{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.blocks = res.data.data.list;
                            var This = this;
                            setTimeout(function(){
                                $('main .about>.bg').append($('main .about .storeBox').find('img')[1]);
                                $('main .about .fluid .stand .bg').append($('main .about .storeBox').find('img')[0]);
                                $('main .about .fluid .txt p:nth-child(1)').text($('main .about .storeBox').find('p')[0].innerText);
                                $('main .about .fluid .txt p:nth-child(2)').text($('main .about .storeBox').find('p')[1].innerText);

                                $('main .pipeline .txt .title').after(This.blocks[1].htmlContent);
                            },10)
                        })

                        //获取新闻
                        axios.post(dataUrl + 'api/v2/getArchives',{ext06:1,id:79,size:9,page:1},{
                                headers:{
                                    Authorization: headers
                                }
                            })
                            .then((res) => {
                                console.log(res.data.data);
                                this.news = res.data.data.list;
                                this.transDate(this.news);
                            })
                    },
                },
                created:function(){
                    this.writingWeb();
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        methods:{
                            
                        },
                        props:['parentNav','parentCurrentind','parentBlocks','parentNews'],
                    },
                },
            })
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/index.js"></script>
        <script src="js/TweenLite.min.js"></script>
        <script src="js/EasePack.min.js"></script>
        <script src="js/demo-1.js"></script>
    </body>
</html>